<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <!-- 1. 导入模板引擎 -->
        <script src="./lib/template-web.js"></script>
        <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
        <script src="./lib/jquery.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <!-- 3. 定义模板 -->
        <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
        <!-- 注意，模板里面的?号要替换成 mustache 语法 {{}} 需要渲染什么数据，写上对应的属性名即可-->
        <script type="text/html" id="tpl-user">
            <h1>天王盖地虎   ------    {{cipher}}{{reg}}</h1>
        </script>
        <script>
            // 2. 定义需要渲染的数据
            let data = {cipher: '小鸡炖蘑菇',reg:new Date()}
            // 4. 调用 template 函数
            var htmlStr = template('tpl-user', data)
            // 5. 渲染HTML结构
            $('#container').html(htmlStr)
        </script>
    </body>
</html>
